<!DOCTYPE html>
<html lang="en">
<#assign ctx = request.contextPath />
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>外教君-团购</title>
    <style>
        * {
            box-sizing: border-box;
        }

        html, body {
            margin: 0;
            padding: 0;
            border: 0;
            width: 100%;
            height: 100%;
        }

        .Wload {
            width: 100%;
            position: relative;
            display: flex;
        }

        .WloadLogo {
            padding: .15rem;
            width: 50%;
        }

        .WloadLogo img {
            width: .7rem;
            vertical-align: middle;
        }

        .AppName {
            font-size: .26rem;
            margin-left: .08rem;
            display: inline-block;
            font-weight: 500;
        }

        .BtnRight {
            width: 50%;
            padding: .20rem .24rem;
            text-align: right;
        }

        .Address {
            height: .6rem;
            font-size: .26rem;
            border-radius: 5px;
            background: #FFE40d;
            border: none;
            font-weight: 500;
        }

        .collage {
            width: 100%;
        }

        .Count {
            width: 75%;
            padding: .39rem .13rem .39rem .13rem;
            background: white;
            position: absolute;
            left: calc(50% - (75% / 2));
            top: calc(20% - (1.7rem / 2));
            text-align: center;
            z-index: 995;
        }

        .title {
            font-size: .32rem;
            font-weight: bold;
            display: block;
        }

        .grayfont {
            font-size: .24rem;
            color: #999999;
            margin-top: .19rem;
            display: block;
        }

        .borderButtom {
            margin: .40rem 0;
            border-bottom: 1px solid #f0f0f0;
            color: #f0f0f0;
        }

        .Surplus {
            font-weight: bold;
            font-size: .32rem;
            display: block;
        }

        .Time {
            color: #FA6464;
        }

        .PeopleNum {
            font-size: .28rem;
        }

        .PNumber {
            color: #FA6464;
        }

        .footer {
            padding: .20rem .24rem;
        }

        .Explain {
            width: 100%;
        }

        .Explain span {
            display: block;
        }

        .ExplainTitle {
            font-weight: bold;
            font-size: .32rem;
        }

        .ExplainContext {
            margin-top: 13px;
            font-size: .26rem;
            color: #999999;
        }

        .InvBtn {
            margin-top: .48rem;
        }

        .Invitation {
            width: 100%;
            text-align: center;
            padding: .21rem 0;
            background: #FFE40d;
            border: none;
            font-size: .32rem;
            font-weight: bold;
        }

        /* 遮罩层 */
        .mask {
            width: 85%;
            background: rgba(255, 255, 255, 1);
            border-radius: 6px;
            padding: .30rem .30rem 0 .30rem;
            margin: 0 auto;
            position: absolute;
            z-index: 998;
            left: calc(50% - (85% / 2));
            top: calc(50% - (6rem / 2));
            display: none;
        }

        .maskGray {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            opacity: .8;
            background: gray;
            z-index: 996;
            display: none;
        }

        .Tip {
            width: 100%;
            text-align: center;
            margin-top: .1rem;
            font-size: .36rem;
            font-family: "PingFang-SC-Bold";
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
        }

        .formList {
            width: 100%;
            list-style: none;
            margin-top: .20rem;
            padding: 0;
        }

        .listInput {
            width: 100%;
            padding: .1rem .1rem .12rem .1rem;
            border-bottom: 1px solid #E6E6E6;
        }

        .listInput2 {
            margin-top: .30rem;
            padding: .1rem .1rem .12rem .1rem;
            border-bottom: 1px solid #E6E6E6;
        }

        .PhoneImg {
            width: .50rem;
            line-height: .66rem;
            vertical-align: middle;
            margin: .1rem;
        }

        .PhoneNum {
            height: .31rem;
            width: 80%;
            border: none;
            margin-left: .15rem;
        }

        .PhoneNum1 {
            border: none;
            width: 50%;;
        }

        .Send {
            font-size: .26rem;
            height: .60rem;
            background: none;
            border-radius: 5px;
            border: 1px solid black;
            width: 1.6rem;
            color: black;
            margin-left: 0.15rem;
            padding: .1rem;
        }

        .grant {
            width: 100%;
            margin-top: .29rem;
            text-align: center;
        }

        .grantFont {
            font-size: .24rem;
            color: #B3B3B3;
        }

        .loginBtn {
            width: 100%;
            margin-top: .46rem;
        }

        .loginUser {
            width: 100%;
            border-radius: 6px;
            background: #E6E6E6;
            height: .88rem;
            border: none;
            font-size: .32rem;
            font-weight: bold;
            color: #999999;
        }

        .cloes {
            width: .60rem;
            position: absolute;
            top: -.30rem;
            right: -.30rem;
        }

        .cloes img {
            width: 100%;
        }

        .TipError {
            position: absolute;
            /* height: 0.88rem; */
            background: black;
            opacity: .8;
            top: calc(50% - (.88rem / 2));
            left: calc(50% - (3rem / 2));
            z-index: 999;
            padding: .30rem .47rem .30rem .47rem;
            display: none;
            border-radius: 8px;
            color: white;
        }
    </style>
</head>
<body>
<div class="TipError"></div>
<div class="maskGray"></div>
<div class="mask">
    <div class="cloes"><img src="${ctx}/static/mcCourse/img/icon_guanbi.png" alt="#"></div>
    <div class="Tip">快速登录</div>
    <ul class="formList">
        <li class="listInput">
            <img src="${ctx}/static/mcCourse/img/icon_phone.png" class="PhoneImg"><input type="number" class="PhoneNum" id="PhomeNumbar" placeholder="请输入手机号">
        </li>
        <li class="listInput2">
            <img src="${ctx}/static/mcCourse/img/icon_ verificationcode.png" class="PhoneImg">
            <input type="number" class="PhoneNum1" id="Verification" placeholder="请输入验证码">
            <input type="button" class="Send" onclick="sendSmsCode(this)" value="发送验证码"></input>
        </li>
        <li class="grant">
            <span class="grantFont">未注册用户登录后将自动生成外教君账户</span><br>
            <span class="grantFont">阅读并接受<a style="text-decoration: none;" href="http://app.a.student.nativetalk.waijiaojun.com/article/detail?arti_id=1">《外教君用户使用协议》</a></span>
        </li>
        <li class="loginBtn">
            <button class="loginUser" onclick="loginOrRegister()">
                登录
            </button>
        </li>
    </ul>
</div>
<div class="Wload">
    <div class="WloadLogo"><img src="${ctx}/static/mcCourse/img/logo.png" alt="#"> <span class="AppName">外教君</span></div>
    <div class="BtnRight"><a target="_blank" href="javascript:window.location='http://a.app.qq.com/o/simple.jsp?pkgname=com.waijiaojun';">
        <button class="Address">下载APP</button>
    </a></div>
</div>
<div class="main">
    <img class="collage" src="${ctx}/static/mcCourse/img/chahua.png">
    <div class="Count">
        <span class="title">${resultResponse.courseName}</span>
        <span class="grayfont">开课时间：${resultResponse.courseStartTime!""}-${resultResponse.courseEndTime!""}，${resultResponse.courseSize!""}课时</span>
        <div class="borderButtom"></div>
        <span class="Surplus">
                剩余 <span class="Time" id="timeShow">23:45:01</span> 结束
            </span>
        <span class="PeopleNum">
                <span class="PNumber">${resultResponse.groupMaxUser}</span>人成团，还差<span class="PNumber">${resultResponse.remainGroupUser}</span>个名额，快来参加
            </span>
    </div>
</div>
<div class="footer">
    <div class="Explain">
        <span class="ExplainTitle">拼团规则说明</span>
        <span class="ExplainContext">
                1.点击右下角拼团购买，购买成功即可开团/参团。<br>
                2.通过微信邀请好友参加你的拼团。<br>
                3.有效期内专属拼团页参与人数达到要求即成功。<br>
                4.拼团成功会以短信通知（请不要屏蔽短信喔），在外教君 APP进入“我的系统课”可查看课程。
            </span>
    </div>
    <div class="InvBtn">
        <button class="Invitation">${resultResponse.groupPrice}拼团</button>
        <input type="hidden" id="open_id" value="0">
    </div>
</div>
</body>
<script src="${ctx}/static/mcCourse/js/jquery-2.1.0.js"></script>
<script src="${ctx}/static/pingpp.js"></script>
<script src="${ctx}/static/mcCourse/js/basis.js"></script>
<script src="${ctx}/static/mcCourse/js/Collage.js"></script>
<script type="text/javascript" src="${ctx}/static/weike-share/js/libs/md5.js"></script>
<script>

    (function weixinLogin(){
        var open_id=$("#open_id").val();
        if(open_id ==0){
            console.log("跳转到微信登录授权");
        }
    })();

    function sendSmsCode(obj) {
        var phone = $("#PhomeNumbar").val();
        // 客户端校验手机号码格式
        if (validatePhoneNum(phone)) {
            // 调用发送手机验证码接口
            var timestamp = Date.parse(new Date()) / 1000;
            var signInfoPlainText = timestamp + "nativetalk";
            var signInfo = hex_md5(signInfoPlainText);
            $.ajax({
                type: 'post',
                url: '${ctx}/v5.0/student/account/sendSmsCode/' + phone,
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                headers: {"client_type": "3", "version": "11", "Timestamp": timestamp, "SignInfo": signInfo, "client_type": 4},
                success: function (data) {
                    if (data.mark == "0") {
                        time(obj);
                        showMsg("验证码发送成功");
                        enableLoginBtn();
                    } else {
                        showMsg(data.tip);
                    }
                },
                error: function (xhr, errorMsg, e) {
                    showMsg(xhr.status + ":" + xhr.statusText);
                }
            });
        } else {
            showMsg('手机号格式不正确');
        }


    }

    function loginOrRegister(){
        var timestamp = Date.parse(new Date()) / 1000;
        var signInfoPlainText = timestamp + "nativetalk";
        var signInfo = hex_md5(signInfoPlainText);
        var phone = $("#PhomeNumbar").val();
        var vcode = $("#Verification").val();
        var postData = {"memb_phone":phone,"code":vcode};
        console.log(postData);
        $.ajax({
            type: 'post',
            url: '${ctx}/v5.0/student/account/registerOrLoginByPhoneAndCode?memb_phone='+phone +'&code='+vcode,
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            headers: {"client_type": "3", "version": "11", "Timestamp": timestamp, "SignInfo": signInfo, "client_type": 4},
            success: function (data) {
                if (data.mark == "0") {
                    console.log(data);
                    window.location='http://a.app.qq.com/o/simple.jsp?pkgname=com.waijiaojun';
                } else {
                    showMsg(data.tip);
                }
            },
            error: function (xhr, errorMsg, e) {
                showMsg(xhr.status + ":" + xhr.statusText);
            }
        });
    }

    var wait = 60;
    function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            o.value = "发送验证码";
            wait = 60;
        } else {
            o.setAttribute("disabled", true);
            console.log(0)
            o.value = wait + "S";
            wait--;
            setTimeout(function () {
                time(o)
            }, 1000)
        }
    }

    function showMsg(msg) {
        $('.TipError').show();
        $('.TipError').text(msg);

        function heidden() {
            $('.TipError').hide();
        }

        var timer = setTimeout(heidden, 3000)
    }

    //验证手机号码
    function validatePhoneNum(phone) {
        console.log(phone)
        var reg = /^1[0-9]{10}/;
        return reg.test(phone);
    }

    function enableLoginBtn() {
        $('.loginUser').css({
            backgroundColor: "#FFE40D",
            color: '#1A1A1A'
        })
    }

    $(function () {
        $('.Invitation').click(function () {
            $('.maskGray').show();
            $('.mask').show()
        })

        $('.cloes').click(function () {
            $('.maskGray').hide();
            $('.mask').hide()
        })
    })
</script>
</html>